import React, { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import axios from "../../http/axios";
import style from "./index.module.scss";
import { Checkbox,Toast } from "react-vant";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [checked, setChecked] = React.useState(false);
  const [itemData, setItemData] = useState<any>({} as any);
  const { id } = useParams();
  console.log(id);
  const getData = async (id: number) => {
    const res = await axios.get("/api/dateid", {
      params: { id: id },
    });

    setItemData(res.data.data);
    console.log(res.data.data);
  };
  const sq =()=>{
    if(checked){
      
      navigate('/addhuanzhe')
    }else{
      Toast.fail('请先勾选')
    }

  }
  useEffect(() => {
    getData(id as any);
  }, []);
  return (
    <div>
      <div className={style.container}>
        <div className={style.doctorinfo}>
          <img src={itemData.image} alt="" />
          <div>
            <h2>
              {itemData.name} {itemData.type}
            </h2>
            {itemData.hospital}
          </div>
        </div>

        <div className={style.reviews}>
          <div>88个在线服务评价(90天内)</div>
          <div className={style.reviews1}>
            <div>好评(88)</div>
            <div>中/差评(0)</div>
            <a href="#">查看全部&gt;</a>
          </div>
        </div>
        <div className={style.serviceguarantees}>
          <ul>
            <li>医生真实</li>
            <li>未使用随时退</li>
            <li>不满意可申诉</li>
          </ul>
        </div>
        <div className={style.consultationtypes}>
          <h2>线上问诊 一般等待时长 快</h2>
          <div>以下服务均可上传文字、图片、视频和影像检查等资料</div>
          <div>
            <Checkbox checked={checked} onChange={setChecked}></Checkbox>
            <h2>图文问诊 200元/1天</h2>
            <ul>
              <li>适合可以耐心等待医生回复的病情咨询</li>
              <li>有充分的问诊过程，可随时补充资料</li>
            </ul>
          </div>
           <a href="#">服务说明&gt;</a>
        </div>

        <div className={style.applybutton}>
          <button onClick={()=>sq()}>立即申请</button>
        </div>
      </div>
    </div>
  );
};

export default Index;
